<extend name="./public/frame.html"/>
<block name="content">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-warm" data-type="add" id="add">添加角色</button>
    </div>
    <table class="layui-table"
           lay-data="{width:960, height:'auto', url:'{:url('Admin/role')}', page: true, limit: 10, id:'role'}"
           lay-filter="role">
        <thead>
        <tr>
            <th lay-data="{checkbox:true, fixed: true}"></th>
            <th lay-data="{field:'role_id', width:60, fixed: true, sort: true}">ID</th>
            <th lay-data="{field:'role_name', width:220}">角色名称</th>
            <th lay-data="{field:'role_desc', width:220}">描述</th>
            <th lay-data="{fixed:'right', toolbar: '#barDemo', width:150, align:'center'}">操作</th>
        </tr>
        </thead>
    </table>

    <div class="layui-hide" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </div>

    <script>
        layui.use('table', function () {
            var table = layui.table;

            //监听工具条
            table.on('tool(role)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('确定删除吗?', function (index) {
                        var role_id = data.role_id;
                        var url = "{:U('ajax_roleDel')}";
                        $.post(url, {'role_id': role_id}, function (res) {
                            switch (res['status']){
                                case 1:
                                    obj.del();
                                    break;
                                default:
                                    layer.alert(res['msg'],{icon: 5});
                                    break;
                            }
                        }, 'json');
                            layer.close(index);
                    });
                }
                else if (obj.event === 'edit') {
                    var role_id = data.role_id;
                    layer.open({
                        type: 2,
                        title: '编辑'+data.role_name+'的权限',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("/admin/admin/role_info","role_id=")}' + role_id //iframe的url
                    });
                }
            });

            var $ = layui.jquery, active = {
                add: function () {
                    layer.open({
                        type: 2,
                        title: '添加角色',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("/admin/admin/role_info")}', //iframe的url
                        cancel: function (index, layero) {
                            table.reload('role', {url: '/admin/admin/role'});
                        }
                    });
                }
            };

            $('.layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });

    </script>
</block>
